<template>
  <el-card style="margin: 24px;" shadow="never">
    <el-dialog title="跟踪" :visible.sync="imgShow" center>
      <span style="width: 100%;" element-loading-background="rgba(0, 0, 0, 0.3)">
        <transition name="fade" mode="out-in">
          <img v-show="!imgLoading" ref="img" style="heigth: 100%; width: 100%;" :src="imageUrl" @load="loadImg">
        </transition>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgShow = false">取 消</el-button>
        <el-button type="primary" @click="imgShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="办理" :visible.sync="formShow" :close-on-click-modal="false" center top="50px" width="80%">
      <span style="width: 100%;" element-loading-background="rgba(0, 0, 0, 0.3)">
        <el-tabs v-model="formActiveName" @tab-click="formHandleClick">
          <el-tab-pane label="表单详情" name="formDetTab">
            <el-card title="表单详情" shadow="never">
              <div slot="header" class="clearfix">
                <span>表单详情</span>
              </div>
              <!-- <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="流程业务ID">
                  <el-input v-model="form.businessKey" />
                </el-form-item>
              </el-form> -->
              <el-form :model="form">
                <el-form-item label="请假人工号">
                  <el-input v-model="form.creator" placeholder="请假人工号" />
                </el-form-item>
                <el-form-item label="请假人姓名">
                  <el-input v-model="form.name" placeholder="请假人姓名" />
                </el-form-item>
                <el-form-item label="请假天数">
                  <el-input v-model="form.days" placeholder="请假天数" />
                </el-form-item>
                <el-form-item label="开始日期">
                  <!-- <el-input v-model="form.startTime" placeholder="开始日期" /> -->
                  <el-date-picker
                    v-model="form.startTime"
                    type="date"
                    placeholder="开始日期"
                    style="width: 100%;"
                  />
                </el-form-item>
                <el-form-item label="结束日期">
                  <!-- <el-input v-model="form.endTime" placeholder="结束日期" /> -->
                  <el-date-picker
                    v-model="form.endTime"
                    type="date"
                    placeholder="开始日期"
                    style="width: 100%;"
                  />
                </el-form-item>
                <el-button type="primary" @click="editForm()">编辑</el-button>
              </el-form>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="审批" name="operaTab">
            <el-card style="margin-top: 16px;" title="审批列表" shadow="never">
              <div slot="header" class="clearfix">
                <span>审批列表</span>
              </div>
              <el-table v-loading="loading" :data="commentsData" style="width: 100%">
                <el-table-column label="名称">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="消息">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.fullMsg }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="审批人">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="发起时间" width="200">
                  <template slot-scope="scope">
                    <i v-if="scope.row.startTime != null" class="el-icon-time" />
                    <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.time) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>

            <el-card style="margin-top: 16px;" title="审批" shadow="never">
              <div slot="header" class="clearfix">
                <span>审批</span>
              </div>
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="审批意见">
                  <el-input v-model="form.desc" type="textarea" />
                </el-form-item>
              </el-form>
              <el-button type="primary" :loading="btnLoding.complete" @click="complete()">审批</el-button>
              <el-button type="primary" :loading="btnLoding.complete" @click="complete('CXTJ')">重新提交</el-button>
              <el-button type="primary" :loading="btnLoding.claimTask" @click="claimTask()">签收</el-button>
              <el-button type="primary" :loading="btnLoding.unClaimTask" @click="unClaimTask()">反签收</el-button>
              <el-button type="primary" :loading="btnLoding.revokeProcess" @click="revokeProcess()">撤回</el-button>
              <el-button type="primary">终止</el-button>
              <el-button type="primary" :loading="btnLoding.turnTask" @click="turnTask()">转办</el-button>
              <el-button type="primary" :loading="btnLoding.delegateTask" @click="delegateTask()">委派</el-button>
              <el-button type="primary" :loading="btnLoding.beforeAddSignTask" @click="beforeAddSignTask()">前加签</el-button>
              <el-button type="primary" :loading="btnLoding.afterAddSignTask" @click="afterAddSignTask()">后加签</el-button>
              <el-button type="primary" :loading="btnLoding.doBackStep" @click="showDoBackStepList()">驳回</el-button>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="流程图" name="imgTab" style="text-align: center;">
            <transition name="fade" mode="out-in">
              <img v-show="!imgLoading" ref="img" :src="imageUrl" @load="loadImg">
            </transition>
          </el-tab-pane>

        </el-tabs>

      </span>
    </el-dialog>

    <el-dialog title="可驳回列表" :visible.sync="backStepShow" center>
      <span>
        <el-select v-model="backStepValue" clearable filterable>
          <el-option
            v-for="backStep in backStepList"
            :key="backStep.nodeId"
            :label="backStep.nodeName"
            :value="backStep.nodeId"
          />
        </el-select>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="backStepShow = false">取 消</el-button>
        <el-button type="primary" @click="doBackStep()">确 定</el-button>
      </span>
    </el-dialog>

    <el-form :inline="true" :model="formInline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.userCode" placeholder="用户名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待办任务" name="applying">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="formHandle(scope.row)">办理</el-button>
              <el-button
                size="mini"
                type="text"
                @click="processFileImg(scope.row.processInstanceId)"
              >跟踪</el-button>
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.formName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.taskName }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="系统">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.systemSn }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="发起时间" width="200">
            <template slot-scope="scope">
              <i v-if="scope.row.startTime != null" class="el-icon-time" />
              <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          style="margin-top: 16px;"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="已办任务" name="applyed">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="formHandle(scope.row)">办理</el-button>
              <el-button
                size="mini"
                type="text"
                @click="processFileImg(scope.row.processInstanceId)"
              >跟踪</el-button>
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.formName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.taskName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信息">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.comment }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="系统">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.systemSn }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="发起时间" width="200">
            <template slot-scope="scope">
              <i v-if="scope.row.startTime != null" class="el-icon-time" />
              <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" width="200">
            <template slot-scope="scope">
              <i v-if="scope.row.endTime != null" class="el-icon-time" />
              <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          style="margin-top: 16px;"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="我发起流程" name="processInstances">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="formHandle(scope.row)">办理</el-button>
              <el-button
                size="mini"
                type="text"
                @click="processFileImg(scope.row.processInstanceId)"
              >跟踪</el-button>
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.formName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.taskName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审批人">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.approver }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="系统">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.systemSn }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="发起时间" width="200">
            <template slot-scope="scope">
              <i v-if="scope.row.startTime != null" class="el-icon-time" />
              <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" width="200">
            <template slot-scope="scope">
              <i v-if="scope.row.endTime != null" class="el-icon-time" />
              <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          style="margin-top: 16px;"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script>
import { doBackStep, getBackNodesByProcessInstanceId, commentsByProcessInstanceId, beforeAddSignTask, afterAddSignTask, delegateTask, turnTask, revokeProcess, unClaimTask, getApplyingTasks, getApplyedTasks, getMyProcessInstances, findFormInfo, complete, claimTask } from '@/api/task'
import * as fecha from 'element-ui/lib/utils/date'

export default {
  name: 'EngineTasks',
  data() {
    return {

      formActiveName: 'formDetTab',

      form: {
        businessKey: '',
        processInstanceId: '',
        taskId: '',
        desc: ''
      },

      activeName: 'applying',

      currentPage: 1,
      total: 40,
      pageSize: 10,

      tableData: [],

      imgShow: false,
      imageUrl: '',
      xmlShow: false,
      xmlText: '',
      imgLoading: true,

      loading: true,

      formShow: false,

      formInline: {
        userCode: 'pm'
      },

      // 审批意见列表
      commentsData: [],

      taskId: '',

      row: null,

      btnLoding: {
        complete: false,
        claimTask: false,
        unClaimTask: false,
        revokeProcess: false,
        turnTask: false,
        delegateTask: false,
        beforeAddSignTask: false,
        afterAddSignTask: false,
        doBackStep: false
      },

      backStepShow: false,

      backStepList: [],

      backStepValue: ''

    }
  },

  created() {
    this.getList()
  },

  methods: {

    editForm() {
      this.$message({
        showClose: true,
        message: '暂未开发',
        type: 'info'
      })
    },

    // 前加签
    beforeAddSignTask() {
      this.btnLoding.beforeAddSignTask = true
      this.$prompt('请输入加签人', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc,
          userCodes: [value]
        }

        beforeAddSignTask(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.btnLoding.beforeAddSignTask = false
        }).catch(() => {
          this.btnLoding.beforeAddSignTask = false
        })
      }).catch(() => {
        this.btnLoding.beforeAddSignTask = false
      })
      this.getCommonsList(this.row)
    },
    // 后加签
    afterAddSignTask() {
      this.btnLoding.afterAddSignTask = true
      this.$prompt('请输入加签人', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc,
          userCodes: [value]
        }

        afterAddSignTask(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.btnLoding.afterAddSignTask = false
          this.getCommonsList(this.row)
        }).catch(() => {
          this.btnLoding.afterAddSignTask = false
        })
      }).catch(() => {
        this.btnLoding.afterAddSignTask = false
      })
    },
    // 驳回
    doBackStep() {
      this.btnLoding.doBackStep = true
      const query = {
        processInstanceId: this.form.processInstanceId,
        taskId: this.taskId,
        userCode: this.formInline.userCode,
        message: this.form.desc,
        distFlowElementId: this.backStepValue
      }

      doBackStep(query).then(response => {
        if (response.code === '100') {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
        this.backStepShow = false
        this.btnLoding.doBackStep = false
        this.getCommonsList(this.row)
      }).catch(() => {
        this.btnLoding.doBackStep = false
      })
    },
    // 驳回列表
    showDoBackStepList() {
      this.backStepList = []
      // this.loading.doBackStep = true
      const query = {
        processInstanceId: this.form.processInstanceId,
        taskId: this.taskId
      }

      getBackNodesByProcessInstanceId(query).then(response => {
        if (response.code === '100') {
          this.backStepList = response.datas
          this.backStepShow = true
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
      })
    },

    // 委派
    delegateTask() {
      this.btnLoding.delegateTask = true
      this.$prompt('请输入委派人', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc,
          userCodes: [value]
        }

        delegateTask(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.btnLoding.delegateTask = false
          this.getCommonsList(this.row)
        }).catch(() => {
          this.btnLoding.delegateTask = false
        })
      }).catch(() => {
        this.btnLoding.delegateTask = false
      })
    },

    // 转办
    turnTask() {
      this.btnLoding.turnTask = true
      this.$prompt('请输入转办人', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc,
          userCodes: [value]
        }

        turnTask(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.btnLoding.turnTask = false
          this.getCommonsList(this.row)
        }).catch(() => {
          this.btnLoding.turnTask = false
        })
      }).catch(() => {
        this.btnLoding.turnTask = false
      })
    },

    // 撤回
    revokeProcess() {
      this.btnLoding.revokeProcess = true
      this.$confirm('确认撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc
        }

        revokeProcess(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.btnLoding.revokeProcess = false
          this.getCommonsList(this.row)
        }).catch(() => {
          this.btnLoding.revokeProcess = false
        })
      }).catch(() => {
        this.btnLoding.revokeProcess = false
      })
    },

    // 反签收
    unClaimTask() {
      this.btnLoding.unClaimTask = true
      this.$confirm('确认反签收?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc
        }

        unClaimTask(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.btnLoding.unClaimTask = false
        }).catch(() => {
          this.btnLoding.unClaimTask = false
        })
      }).catch(() => {
        this.btnLoding.unClaimTask = false
      })
      this.getCommonsList(this.row)
    },

    // 签收
    claimTask() {
      this.$confirm('确认签收?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc
        }

        claimTask(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
        })
      })
      this.getCommonsList(this.row)
    },

    // 审批
    complete(type) {
      if (typeof type === 'undefined') {
        type = 'SP'
      }
      this.btnLoding.complete = true
      this.$prompt('是否继续操作?[yes/no]', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const variables = { agree: value }
        const query = {
          processInstanceId: this.form.processInstanceId,
          taskId: this.taskId,
          userCode: this.formInline.userCode,
          message: this.form.desc,
          type: type,
          variables: variables
        }

        complete(query).then(response => {
          if (response.code === '100') {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error'
            })
          }
          this.getCommonsList(this.row)
          this.btnLoding.complete = false
        }).catch(() => {
          this.btnLoding.complete = false
        })
      }).catch(() => {
        this.btnLoding.complete = false
      })
    },

    datetimeFormatter(val) {
      if (val == null) {
        return val
      }
      const dt = fecha.format(new Date(val), 'yyyy-MM-dd HH:mm:ss')
      return dt
    },

    formHandle(row) {
      this.row = row
      this.taskId = row.taskId

      this.imageUrl = process.env.VUE_APP_BASE_API + '/rest/formdetail/image/' + row.processInstanceId + '/png' + '?t=' + Date.parse(new Date())

      row.businessName = 'leave'
      findFormInfo(row).then(response => {
        this.formActiveName = 'formDetTab'
        if (response.code === '100') {
          if (response.data != null) {
            this.form = response.data.formInfo
          } else {
            this.form = { creator: '', name: '', day: '', startTime: '', endTime: '' }
          }
          this.formShow = true
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
      })

      this.getCommonsList(row)
    },

    getCommonsList(row) {
      // 审批意见列表
      commentsByProcessInstanceId(row).then(response => {
        this.commentsData = response
      })
    },

    formHandleClick(tab, event) {
      this.imageUrl = process.env.VUE_APP_BASE_API + '/rest/formdetail/image/' + this.row.processInstanceId + '/png' + '?t=' + Date.parse(new Date())
      this.getCommonsList(this.row)
      // console.log(tab, event)
    },

    handleClick(tab, event) {
      this.getList()
      // console.log(tab, event)
    },

    loadImg() {
      this.imgLoading = false
    },

    processFileImg(id) {
      this.imgLoading = true
      const tmpImageUrl = process.env.VUE_APP_BASE_API + '/rest/formdetail/image/' + id + '/png' + '?t=' + Date.parse(new Date())
      if (tmpImageUrl === this.imageUrl) {
        this.imgLoading = false
      } else {
        this.imageUrl = process.env.VUE_APP_BASE_API + '/rest/formdetail/image/' + id + '/png' + '?t=' + Date.parse(new Date())
      }
      this.imgShow = true
    },

    handleSizeChange() {
      console.log('handleSizeChange')
    },

    handleCurrentChange(val) {
      const query = {
        pageNum: val,
        pageSize: this.pageSize
      }
      this.getList(query)
    },

    getList(query) {
      this.loading = true

      if (typeof query === 'undefined') {
        query = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          userCode: 'hr'
        }
      }

      if (this.activeName === 'applying') {
        // if (this.formInline.userCode === '') {
        //   this.formInline.userCode = null
        // }
        Object.assign(query, this.formInline)
        getApplyingTasks(query).then(response => {
          this.tableData = response.data
          this.total = response.total
          this.loading = false
        })
      } else if (this.activeName === 'applyed') {
        query.userCode = 'pm'
        if (this.formInline.userCode === '') {
          this.formInline.userCode = null
        }
        Object.assign(query, this.formInline)
        getApplyedTasks(query).then(response => {
          this.tableData = response.data
          this.total = response.total
          this.loading = false
        })
      } else if (this.activeName === 'processInstances') {
        query.userCode = '2751'
        if (this.formInline.userCode === '') {
          this.formInline.userCode = null
        }
        Object.assign(query, this.formInline)
        getMyProcessInstances(query).then(response => {
          this.tableData = response.data
          this.total = response.total
          this.loading = false
        })
      }
    }
  }
}
</script>
